<template>
  <div class="cont-main">
    <div class="menu-body common-content">
      <div class="top-search-bar">
        <el-form size="small" ref="queryForm" inline>
          <el-form-item label="">
            <el-select
                style="width: 190px"
                v-model="searchData.accountEnabled"
                placeholder="账号是否启用"
                @change="search"
                clearable>
              <el-option label="启用" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select
                style="width: 190px"
                v-model="searchData.onlineState"
                placeholder="是否在线"
                @change="search"
                clearable>
              <el-option label="在线" value="0"></el-option>
              <el-option label="离线" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select
                @change="search"
                style="width: 190px"
                v-model="searchData.roleId"
                placeholder="按角色"
                clearable>
              <el-option
                  v-for="(label,id) in role"
                  :key="id"
                  :label="label"
                  :value="id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input
                style="width: 190px"
                v-model="searchData.realName"
                placeholder="按姓名"
                @input="search"
                clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="search()">搜索
            </el-button>
            <el-button
                type="primary"
                icon="el-icon-refresh-right"
                @click="refresh()">刷新
            </el-button>
            <el-button
                v-if="auth&&auth.add"
                type="primary"
                icon="el-icon-plus"
                @click="addUser()">新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <Table
          ref="table"
          :table-header="tableHeader"
          :tableData="tableData"
          :max-height="tableMaxHeight"
          :pg-total-num="total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange">
        <div slot="operation" slot-scope="row">
          <!--<i class="el-icon-edit table-btn" @click="ediUserInfo(row)" title="修改用户信息" v-if="auth&&auth.edit"></i>-->
          <!--<i class="el-icon-refresh-left table-btn" @click="resetPassword(row)" title="重置密码"></i>-->
          <!--<i class="el-icon-user table-btn" @click="quitUser(row)" title="剔除用户下线"></i>-->
          <!--<i class="el-icon-delete table-btn del" @click="del(row)" title="删除" v-if="auth&&auth.del"></i>-->

          <YtBtn type="edit" title="修改用户信息" @click="ediUserInfo(row)" v-if="auth&&auth.edit"></YtBtn>
          <YtBtn type="reset" title="重置密码" @click="resetPassword(row)"></YtBtn>
          <YtBtn type="out" title="剔除用户下线" @click="quitUser(row)"></YtBtn>
          <YtBtn type="del" title="删除" @click="del(row)" v-if="auth&&auth.del"></YtBtn>
        </div>

        <div slot="accountEnabled" slot-scope="row" style="line-height: 1;">
          <el-tag v-if="parseInt(row.data.accountEnabled)===0" type="success" size="mini" effect="dark">启用</el-tag>
          <el-tag v-else type="danger" size="mini" effect="dark">禁用</el-tag>
        </div>

        <div slot="onlineState" slot-scope="row" style="line-height: 1;">
          <el-tag v-if="parseInt(row.data.onlineState)===0" type="success" size="mini" effect="dark">在线</el-tag>
          <el-tag v-else type="danger" size="mini" effect="dark">离线</el-tag>
        </div>
      </Table>
    </div>

    <AddUserDailog ref="addUserDailog" @success="getUserList"></AddUserDailog>
  </div>
</template>

<script>
import Table from "@/components/Table";
import {
  get_userList,
  get_roleList,
  del_user,
  put_quitUser,
  put_resetPassword,
  get_VendorList,
} from "@/apis/user/userApi";
import AddUserDailog from "./comp/AddUserDailog";
import {debounce} from '@/utils'

export default {
  aside: 'comp/CompAside',
  components: {Table, AddUserDailog},
  data() {
    return {
      auth: null,
      tableMaxHeight: '50px',
      tableHeader: [
        {prop: "loginName", name: "账号", width: 80},
        {prop: "realName", name: "用户名称", width: 80},
        {prop: "loginIp", name: "登录IP", width: 120},
        {prop: "roleChName", name: "角色名", width: 100},
        {prop: "vendorName", name: "所属厂家", width: 80},
        {prop: "userIphone", name: "联系电话", width: 100},
        {prop: "accountEnabled", name: "是否启用", tag: true, width: 80},
        {prop: "onlineState", name: "在线状态", tag: true, width: 80},
        {prop: "accountData", name: "账号有效期(月)", width: 100},
        {prop: "passwordData", name: "密码有效期(月)", width: 100},
        {prop: "tokenExpire", name: "token时间(秒)", width: 100},
        {prop: "loginTime", name: "最近登录时间", width: 140},
        {prop: "addTime", name: "创建时间", width: 140},
        {prop: "editTime", name: "修改时间", width: 140},
        {prop: "remarks", name: "备注", minWidth: 120},
        {prop: "remarks", name: "操作", slot: true, width: 150},
      ],
      searchData: {
        accountEnabled: "",
        realName: "",
        roleId: "",
        onlineState: "",
      },
      nowPage: 1,
      total: 0,
      pageSize: 10,
      tableData: [],
      role: [] // 角色下拉列表
    };
  },
  created() {
    this.getUserList();
    this.getRoleList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableMaxHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50 - 30 - 48 + 'px'
    })
  },
  methods: {
    //获取角色下拉
    getRoleList() {
      get_roleList().then((res) => {
        let {data} = res.data;
        this.role = data
      })
    },
    // 获取所有用户列表
    getUserList(val = {}) {
      get_userList(
        Object.assign({}, val, {
          pageSize: this.pageSize,
          pageNum: this.nowPage,
          menuId: this.$route.meta.id
        })
      ).then((res) => {
        let {records, total} = res.data.data;
        this.auth = res.data.auth
        this.total = total;
        if (records.length === 0 && this.nowPage > 1) {
          this.nowPage--;
          this.getUserList();
        }
        records.forEach((item) => {
          if (item.loginTime) {
            item.loginTime = this.$moment(Number(item.loginTime)).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          }
          if (item.addTime) {
            item.addTime = this.$moment(item.addTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          }
          if (item.editTime) {
            item.editTime = this.$moment(item.editTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          }
          item.roleChName = item.role.roleChName;
          item.vendorName = item.vendor.vendorName;
        });
        this.tableData = records;
      });
    },
    //搜索
    search: debounce(function () {
      let tiem = {};
      for (const key in this.searchData) {
        if (this.searchData[key] != "") {
          tiem[key] = this.searchData[key];
        }
      }
      this.getUserList(tiem);
    }, 100),
    // 刷新
    refresh() {
      this.getUserList();
      this.searchData = {
        accountEnabled: "",
        realName: "",
        roleId: "",
        onlineState: "",
      };
    },
    // 修改用户信息
    ediUserInfo(row) {
      let {data} = row
      this.$refs.addUserDailog.show(2, {
        id: row.data.id,
        loginName: data.loginName,
        realName: data.realName,
        idType: data.idType,
        idNumber: data.idNumber,
        userIphone: data.userIphone,
        accountEnabled: data.accountEnabled == "启用" ? "0" : "1",
        roleId: data.role.id,
        vendorId: data.vendorId,
        remarks: data.remarks,
      })
    },
    // 剔除用户下线
    quitUser(row) {
      if (row.data.onlineState == "离线") {
        this.$message.error("当前用户不在线");
      } else {
        this.$confirm("是否将该用户剔除下线?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          put_quitUser({id: row.data.id}).then((res) => {
            let {code, msg} = res.data;
            this.getUserList();
            this.$message.success(msg);
          });
        }).catch(() => {
        });
      }
    },
    // 重置密码
    resetPassword(row) {
      this.$confirm("是否将该用户密码重置?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        put_resetPassword({id: row.data.id}).then((res) => {
          let {code, msg} = res.data;
          this.getUserList();
          this.$message.success(msg);
        });
      }).catch(() => {
      });
    },
    //删除
    del(row) {
      this.$confirm("此操作将永久删除选择用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        del_user({id: row.data.id}).then((res) => {
          let {code, msg} = res.data;
          this.getUserList();
          this.$message.success(msg);
        });
      }).catch(() => {
      });
    },
    //添加用户
    addUser() {
      this.$refs.addUserDailog.show(1, {
        loginName: "",
        realName: "",
        idType: "",
        idNumber: "",
        userIphone: "",
        accountEnabled: "",
        vendorId: "",
        roleId: "",
        remarks: ""
      })
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      this.nowPage = val;
      this.getUserList();
    }
  }
};
</script>
<style lang="less" scoped>
  .cont-main {
    height: 100%;
    padding: 15px;

    .menu-body {
      height: 100%;
      padding: 15px;
    }
  }

  .be-careful-item {
    line-height: 1.5;
  }

  .bottom {
    position: absolute;
    padding: 10px 10px;
  }
</style>
